<template>
  <el-date-picker v-model="state.region" :disabled="isDisabled" :type="props.type" :value-format="props.valueFormat"
    :format="props.format" :size="size" :range-separator="props.rangeSeparator"
    :start-placeholder="props.startPlaceholder" :end-placeholder="props.endPlaceholder" :date-format="props.dateFormat"
    :time-format="props.timeFormat" :default-time="defaultTime" :validateEvent="false" />
</template>
<script setup name="customTimeRegion">
import { useFormItem, useFormItemInputId, useFormSize, useFormDisabled } from 'element-plus'
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: ''
  },
  validateEvent: {
    type: Boolean,
    default: true
  },
  timeEnd: { // 默认值
    type: [String, Object, Array],
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  startPlaceholder: { // 默认值
    type: String,
    default: '开始日期'
  },
  endPlaceholder: { // 默认值
    type: String,
    default: '结束日期'
  },
  rangeSeparator: {
    type: String,
    default: '-'
  },
  size: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'datetimerange',
    validator (value, props) {
      // The value must match one of these strings
      return ['year', 'month', 'date', 'datetime', 'week', 'datetimerange', 'daterange'].includes(value)
    }
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  dateFormat: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  timeFormat: {
    type: String,
    default: 'HH:mm:ss'
  },
  valueFormat: {
    type: String,
    default: '' // YYYY-MM-DD HH:mm:ss
  }
})
const emit = defineEmits(['update:modelValue', 'update:timeEnd', 'change'])
const { form, formItem } = useFormItem()
const { inputId } = useFormItemInputId(props, { formItemContext: formItem })
const inputSize = useFormSize()
const formDisabled = useFormDisabled()
const state = reactive({
  region: ''
})
const initValue = () => {
  if (props.modelValue && props.timeEnd && state.region === '') {
    state.region = [props.modelValue, props.timeEnd]
    console.log('1', state.region)
  } else if (state.region !== '' && props.modelValue === '') {
    state.region = ''
    console.log('2', state.region)
  }
  // setCurrentValue(state.region)
}
const isDisabled = computed({
  get: () => props.disabled || formDisabled.value,
})
const size = computed({
  get: () => props.size || inputSize.value,
})
const defaultTime = computed({
  get: () => props.type.indexOf('range') > -1 ? [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)] : new Date(2000, 1, 1, 0, 0, 0),
})
const regionWatch = watch(() => state.region, (val) => {
  let sv = ''
  let ev = ''
  if (val && Array.isArray(val)) {
    sv = val[0]
    ev = val[1]
  }
  emit('update:modelValue', sv)
  emit('update:timeEnd', ev)
  setCurrentValue(val)
})
const setCurrentValue = (value, emitChange = true) => {
  nextTick(() => {
    emit('change', value, null)
    if (props.validateEvent) {
      formItem?.validate?.('change').catch((err) => console.log(err))
    }
  })
}
const modelValueWatch = watch(() => props.modelValue, (v, ov) => {
  v !== ov && initValue()
})
// const timeEndWatch = watch(() => props.timeEnd, (v, ov) => {
//   initValue()
// })
initValue()
</script>
